<template>
  <div style="height: 100%;display: block;box-sizing: border-box">
    <el-header class="navbar" height="45px" style="padding:0px;">
      <el-row style>
        <el-col :span="4">
          <h3 class="logo">产品编码:{{editorTitle}}</h3>
        </el-col>
        <el-col :span="20">
          <tool-bar :graph.sync="graph" :id="id" :flowCode.sync="flowCode" :flowVersion="flowVersion"
                    :scene-code="sceneCode">
          </tool-bar>
        </el-col>
      </el-row>
    </el-header>
    <el-container class="content ">
      <el-aside width="260px" class="left-box scrollbar-hidden">
        <node-box></node-box>
      </el-aside>
      <el-main class="canvas-box scrollbar-hidden">
        <div id="minimapContainer">
        </div>
        <div id="container" @drop="onDrop" @dragover="allowDrop" class="scrollbar-hidden" style="height: 100%">
        </div>
      </el-main>
    </el-container>
    <!--      :wrapperClosable="false"
    -->
    <el-drawer
      title="节点配置"
      :visible.sync="drawer.attrRight"
      :modal="false"

      :size="'30%'"
    >
      <div class="pl-10">
        <base-form v-if="drawer.attrRight" :formData="editNodeData"
                   v-on:updateFormData="updateFormData"></base-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import MainEditor from './MainEditor'

  export default MainEditor
  // export default {
  //   name: 'MainEditor',
  //   data () {
  //     return {
  //       msg: 'Welcome to Your Vue.js App'
  //     }
  //   }
  // }
</script>

<style scoped>
  @import "../../../css/layout.css";

  .scrollbar-hidden::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  .navbar {
    background: white;
  }

  .header-right-box {
    padding: 20px !important;
    float: right;
  }

  el-row {
    background: transparent;
  }

  .left-box {
    /*background: #304156;*/
    border-right: 1px solid #c1c3c4;
    overflow-y: scroll;
    height: 100%;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .tac {
    overflow: hidden;
    box-sizing: border-box;
  }

  .el-submenu {
    overflow: hidden;
  }

  .left-box::-webkit-scrollbar {
    width: 0px;
  }

  .container {
    height: calc(100% - 45px);
  }

  .tab-header {
    background: white;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08) inset;
  }

  .footer {
    height: 30px;
    background: #cccccc;
  }

  .el-main {
    padding: 0px;
    background: #f3f3f4;
  }


  .logo {
    color: #409eff;
    line-height: 40px;
    padding-left: 20px;
    text-overflow: inherit;
  }

  #minimapContainer {
    position: absolute;
    z-index: 9;
    opacity: 0.8;
    top: -1px;
    left: -1px;
  }

  .content {
    height: calc(100% - 45px);
  }

  .navbar {
    border-bottom: 1px solid #c1c3c4;
  }

  .canvas-box {
    position: relative;
    height: 100%;

  }

  #proxy {
    position: fixed;
    width: 260px;
  }

  @keyframes shine {
    0% {
      background-position: -1px -1px;
    }
    100% {
      background-position: -12px -12px;
    }
  }

  .app-stencil {
    width: 250px;
    border: 1px solid #f0f0f0;
    position: relative;
  }

</style>
